Updates with GoogleMap

File:GoogleMap.zip File:SampleModleForAssociations2.zip

Or look for the snippets to copy down below, after the video👇

The video shows how to:

• Add a map
• Show server data as markers on the map
• Make the markers update when the server object updates
• Detect deletion and remove marker
• Make it possible to create a marker that in turn creates a server object to hold it
• Make the marker take its color from the server object
• Make the marker movable on the map and update the server object on release

To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.

This is the script for you to copy:

var map;
 var dictionaryOfIdsAndMarkers = {};

 function InstallTheDirectiveFor_GoogleMap(streamingAppController) {
  streamingAppController.directive('googlemap', ['$document', function ($document) {
    return {
      link: function (scope, element, attr) {
        // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1)
        var stockholm = { lat: 59.325, lng: 18.073 };
          map = new google.maps.Map(element[0], {
            zoom: 4,
            center: stockholm
          });

          google.maps.event.addListener(map, 'click', function (event) {
            placeMarker(event.latLng, scope);
          });
      }
    };
  }]);

  streamingAppController.directive('googlemapmarker', ['$document', function ($document) {
    return {
      link: function (scope, element, attr) {
        // THIS IS WHERE YOU SEE THE HTML(element) AND THE DATA (scope) FOR EVERYTHING THAT USE OUR DIRECTIVE (test1)
        scope.$watch('row.lat', function (newv, oldval, thescope) {
          UpdatePosition(thescope.row);
        });
        scope.$watch('row.lng', function (newv, oldval, thescope) {
          UpdatePosition(thescope.row);
        });

        scope.$watch('row.color', function (newv, oldval, thescope) {
          UpdatePosition(thescope.row);
        });
        scope.$watch('row.VMClassId.asString', function (newv, oldval, thescope) {
          var marker = dictionaryOfIdsAndMarkers[oldval];
          dictionaryOfIdsAndMarkers[oldval] = null;
          dictionaryOfIdsAndMarkers[newv] = marker;
        });
        scope.$on('$destroy', function (thescope) {
          dictionaryOfIdsAndMarkers[thescope.currentScope.row.VMClassId.asString].setMap(null);
        });

        var newmarker = new google.maps.Marker();
        newmarker.setDraggable(true),
        newmarker.setTitle("Drag me!");
        dictionaryOfIdsAndMarkers[scope.row.VMClassId.asString] = newmarker;

        newmarker.addListener('dragend', function (event) {
          scope.row.lat = event.latLng.lat();
          scope.row.lng = event.latLng.lng();
        });

        UpdatePosition(scope.row);
      }
    };
  }]);

  console.trace("googlemap component Loaded");
 }
 InstallTheDirectiveFor_GoogleMap(angular.module(MDrivenAngularAppModule));

And here are the helper functions:

function UpdatePosition(row)
 {
  var markertoUpdate = dictionaryOfIdsAndMarkers[row.VMClassId.asString];
  if (row.lat != null && row.lng != null) {
    markertoUpdate.setPosition({ lat: row.lat, lng: row.lng });
    markertoUpdate.setMap(map);    if (row.color != null )
      markertoUpdate.setIcon('http://maps.google.com/mapfiles/ms/icons/' + row.color+'-dot.png');
  }

  else  {
    markertoUpdate.setMap(null);
  }
 }

 function placeMarker(location, scope)

 {
  scope.data.VM_Variables.vLat = location.lat();
  scope.data.VM_Variables.vLng = location.lng();
  scope.data.Execute('AddMarker');
 }